<template>
	<view class="contents">
		<view class="detail-header">
			<view class="left">
				<view class="attention ">请退货并填写物流信息</view>
				<view class="time">还剩6天23小时59分</view>
			</view>

		</view>
		<view class="middlecontent">
			<view class="prompt">
				<text>商家已同意退货退款,请尽早退货。</text>
			</view>
			<view class="receivingformation">
				<view class="f1">
					<view class="left">
						<image src="../../static/location.svg" mode=""></image>
					</view>
					<view class="right">
						<view class="consignee">收货人:{{details[0].suppliers.title}}</view>
						<view class="phone"></view>
					</view>
				</view>
				<view class="f1">
					<view class="left">
						<!-- <image src="" mode=""></image> -->
					</view>
					<view class="right">
						<view class="consignee">{{details[0].suppliers.province+details[0].suppliers.city+details[0].suppliers.district+details[0].suppliers.detail   }}</view>
					</view>
				</view>
			</view>
			<view class="returninstructions">
				<view class="f1">
					<view class="left"></view>
					<view class="">
						退货说明:{{details[0].refund_reason_wap}}
					</view>
				</view>
				<view class="f2">
					<view class="">
						<image src="../../static/solidround.svg"></image>未与商家协商一致,请勿使用到付或平邮,以免商家拒签货物
					</view>
					<view class="" style="height: 20rpx;"></view>
					<view class="">
						<image src="../../static/solidround.svg">交易的欠款还在金字中间账户,确保您资金安全
					</view>
					<view class="" style="height: 20rpx;"></view>
					<view class="">
						<image src="../../static/solidround.svg">请填写真实退货物流信息,逾期未填写,退货申请将关闭
					</view>

				</view>
			</view>
		</view>
		<view class="" style="height: 20rpx;"></view>
		<view class="logisticsinformation">
			<view class="content">
				<view class="left">物流单号</view>
				<view class="middle">{{orderno}}</view>
				<view class="right">
					<image src="../../static/scancode.svg" mode="" @click="gotoScanCode"></image>
					<input type="text" v-model="form.refund_delivery_id" placeholder="请输入物流订单号">
				</view>
			</view>
			<view class="content">
				<view class="left">物流公司</view>
				<view class="middle"></view>
				<view class="right">
					<!-- <image src="../../static/rightarrow1.svg" mode=""></image> -->
					<input type="text" v-model="form.refund_delivery_name" placeholder="请输入物流公司">
				</view>
			</view>
			<view class="content">
				<view class="left">联系电话</view>
				<view class="middle"></view>
				<view class="right" style="color: #000;">
					<input type="number" maxlength="11" v-model="form.refund_phone" placeholder="请输入寄件人手机号">
				</view>
			</view>
			<view class="content" style="border-bottom: none;">
				<view class="left">退款说明</view>
				<view class="middle"></view>
				<view class="right" style="font-size: 22rpx;">{{numberofwords}}/45</view>
			</view>
			<view class="userinput">
				<textarea v-model="form.refund_message" placeholder="选填,请输入您申请退款的说明" maxlength="45" @input="oninput" />
			</view>
		</view>
		<view class="fooder" @click="againTuiKuan" v-if="details[0]._status._type == -3">
			<view class="">确认提交</view>
		</view>
	</view>
</template>

<script>
	import {againTuiKuan,orderDetail} from '@/api/api.js'
	export default {
		data() {
			return {
				numberofwords: 0,
				orderno:'',
				form:{
					refund_delivery_id:'',
					refund_delivery_name:'',
					refund_phone:'',
					refund_message:'',
					uni:''
				},
				details:[]
			}
		},
		onLoad(options) {
			this.orderId = options.orderId
			this.form.uni = options.orderId
			this.init(this.orderId)
		},
		methods: {
			init(id){
				let data = `uni=${id}`
				orderDetail(data).then(res=>{
					this.details = res.data.data.order
					if(this.details[0]._status._type == -4){
						this.form = this.details[0]
					}
				})
			},
			oninput(e) {
				this.numberofwords = e.target.value.length
			},
			gotoScanCode() {
				let that = this
				uni.scanCode({
					success: function (res) {
						that.form.refund_delivery_id = res.result
					}
				});
			},
			againTuiKuan(){
				if(this.form.refund_delivery_id == '')return uni,uni.showToast({
					title: '物流单号不能为空',
					duration:1000
				});
				if(this.form.refund_delivery_name == '')return uni,uni.showToast({
					title: '物流名称不能为空',
					duration:1000
				});
				if(this.form.refund_phone == '')return uni,uni.showToast({
					title: '手机号不能为空',
					duration:1000
				});
				let reg = /^1[3-9]{1}[0-9]{9}$/;
				if(!reg.test(this.form.refund_phone))return uni,uni.showToast({
					title: '手机号格式不正确',
					duration:1000
				});
				againTuiKuan(this.form).then(res=>{
					if(res.data.code == '200'){
						uni.showToast({
							title:'提交成功',
							duration:1000
						})
						let times = setTimeout(()=>{
							uni.navigateTo({
								url:'/pages/my/index/index'
							})
						},800)
					}else {
						uni.showToast({
							title:res.data.msg,
							duration:1000
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.contents {
		width: 100%;
		min-height: 100vh;
		background-color: rgb(247, 249, 252);

		.detail-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 28rpx;

			.left {

				// display: flex;
				// flex-direction: column;
				.attention {
					font-size: 28rpx;
					// font-weight: 600;
				}

				.time {
					color: rgb(123, 123, 123);
					font-size: 20rpx;
					margin-top: 10rpx;
				}
			}

			.contactcustomer {
				width: 162rpx;
				height: 52rpx;
				border: 2rpx solid rgb(0, 0, 0);
				border-radius: 34rpx;
				color: rgb(0, 0, 0);
				font-size: 24rpx;
				text-align: center;
				line-height: 52rpx;
			}
		}

		.middlecontent {
			.prompt {
				font-size: 28rpx;
				background-color: #fff;
				padding: 28rpx;
				border-bottom: 2rpx solid rgb(247, 249, 252);
			}

			.receivingformation {
				font-size: 28rpx;
				color: rgb(102, 102, 102);
				background-color: #fff;
				padding: 32rpx 28rpx;
				border-bottom: 2rpx solid rgb(247, 249, 252);

				.f1 {
					display: flex;
					align-items: center;

					.left {
						width: 54rpx;

						image {
							width: 36rpx;
							height: 36rpx;
						}
					}

					.right {
						display: flex;
						flex: 1;
						justify-content: space-between;
					}
				}
			}

			.returninstructions {
				font-size: 28rpx;
				color: rgb(102, 102, 102);
				background-color: #fff;
				padding: 28rpx;

				.f1 {
					display: flex;

					.left {
						width: 54rpx;
					}
				}

				.f2 {
					font-size: 24rpx;
					margin: 40rpx auto;

					image {
						width: 20rpx;
						height: 20rpx;
					}
				}
			}
		}

		.logisticsinformation {
			.content {
				font-size: 28rpx;
				background-color: #fff;
				padding: 28rpx;
				border-bottom: 2rpx solid rgb(247, 249, 252);
				display: flex;

				.middle {
					flex: 1;
				}

				.left {
					width: 120rpx;
				}

				.right {
					color: #999999;
					width: 460rpx;
					// text-align: right;
					display: flex;
					flex-direction: row-reverse;
					align-items: center;
					image {
						width: 60rpx;
						height: 60rpx;
					}
					input {
						text-align: right;
						width: 350rpx;
					}
				}
			}

			.userinput {
				font-size: 28rpx;
				background-color: #fff;
				// display: inline-block;
				height: 100rpx;
				padding: 28rpx;

				textarea {
					height: 100%;
				}
			}
		}



	}
	.fooder {
		position: fixed;
		bottom: 40rpx;
		display: flex;
		justify-content: center;
		width: 100vw;
		view {
			background-color: #1aa034;
			color: #fff;
			height: 70rpx;
			width: 600rpx;
			text-align: center;
			line-height: 70rpx;
			border-radius: 50rpx;
		}
	}
</style>
